<template>
	<view class="guest-index">
		<view class="guest-title">
			咨询留言
		</view>
		<view class="list-list">
			<view class="list-title">类型</view>
			<view class="list-type">
				<view class="type" v-for="(item,index) in typeList" :key="index" :class="type===item.type?'active':''"
					@click="changeType(item.type)">
					{{item.name}}
				</view>
			</view>
			<view class="list-title">留言内容 <text>（必填）</text></view>
			<textarea v-model="content" placeholder-style="color:#909399" placeholder="请输入15字以上描述，以便我们更好地为您提供帮助～" />

			<view class="list-title">上传图片<text>（最多可上传3张）</text></view>
			<u-upload :fileList="picList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="3">
			</u-upload>
			<view class="list-title">联系方式 <text>（必填）</text></view>
			<textarea v-model="phone" placeholder-style="color:#909399" placeholder="请填写您的微信或者手机号" />

		</view>
		<view class="footer" @click="submit" v-if="!showOverlay"> 提交</view>
		<u-overlay :show="showOverlay" :opacity="0.1"></u-overlay>
	</view>

</template>

<script>
	import {
		postMessage,
		uploadImageServer
	} from '@/api/public.js'
	export default {
		components: {

		},
		data() {
			return {
				type: 'question',
				phone: '',
				content: '',
				typeList: [{
						name: '问题咨询',
						type: 'question'
					},
					{
						name: '意见反馈',
						type: 'advice'
					},
				],
				picList: [],
				showOverlay: false
			}
		},
		onLoad() {

		},

		created() {},
		onShow() {
			// indexStore

		},
		onPullDownRefresh() {

		},
		methods: {
			submit() {
				if (this.showOverlay) {
					return
				}
				if (!this.content) {
					uni.showToast({
						icon: 'none',
						title: '请填写留言内容',
						duration: 3000,
					})
					return
				} else {
					if (this.content.length < 15) {
						uni.showToast({
							icon: 'none',
							title: '请输入15字以上的留言内容',
							duration: 3000,
						})
						return
					}
				}
				if (!this.phone) {
					uni.showToast({
						icon: 'none',
						title: '请填写联系方式',
						duration: 3000,
					})
					return
				}
				let imgList = []
				if (this.picList.length > 0) {
					for (let i = 0; i < this.picList.length; i++) {
						imgList.push(this.picList[i].url)
					}
				}
				const paramData = {
					type: this.type,
					phone: this.phone,
					content: this.content,
					picList: imgList
				}
				uni.showLoading({
					mask: true,
					title: '加载中',
				})
				this.showOverlay = true
				postMessage(paramData).then(response => {
					uni.showToast({
						icon: 'none',
						title: '提交成功',
						duration: 2000,
					})
					setTimeout(() => {
						uni.hideLoading();
						this.showOverlay = false
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
					
				}).finally(() => {
					// uni.hideLoading()
					
				})
			},
			changeType(type) {
				this.type = type
			},
			// 删除图片
			deletePic(event) {
				this.picList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.picList.length
				lists.map((item) => {
					this.picList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.picList[fileListLen]
					this.picList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uploadImageServer(url, result => {
							console.log(result, url, 'result')
							resolve(result)
							// _self.userInfo.avatar = result.fullurl
							// _self.save({
							// 	avatar: result.url
							// })
						},
						error => {
							console.log('error')
						}
					)
					// let a = uni.uploadFile({
					// 	url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					// 	filePath: url,
					// 	name: 'file',
					// 	formData: {
					// 		user: 'test'
					// 	},
					// 	success: (res) => {
					// 		setTimeout(() => {
					// 			resolve(res.data.data)
					// 		}, 1000)
					// 	}
					// });
				})
			},
		}


	}
</script>

<style lang="scss" scoped>
	.clearfix {
		clear: both;
	}

	.guest-index {
		background: #F0F2F5;
		width: 100vw;
		min-height: 100vh;

		.guest-title {
			height: 59rpx;
			font-size: 42rpx;
			font-guest: 600;
			color: #323232;
			line-height: 59rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 30rpx;

		}

		.list-list {
			width: 690rpx;
			margin: 50rpx auto;

			.list-title {
				margin-bottom: 26rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #323232;
				margin-top: 26rpx;

				text {
					color: #999999;
					font-weight: normal;
				}
			}

			.list-type {
				display: flex;
				align-items: center;

				.type {
					width: 230rpx;
					height: 58rpx;
					background: #FFFFFF;
					border-radius: 29rpx;
					border: 1rpx solid #909399;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					font-weight: 400;
					color: #909399;
					margin: 0 20rpx;
				}

				.active {
					color: #FF8932 !important;
					background: #FFF6F5 !important;
					border: 1rpx solid #FF6F0F !important;
				}
			}

			textarea {
				width: 100% !important;
				font-size: 26rpx;
				font-weight: 400;
			}



		}

		.footer {
			width: 686rpx;
			height: 104rpx;
			background: #407FFF;
			border-radius: 52rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin: 30rpx auto;
		}
	}
</style>
